"use client";
import { TaskEntity } from "@/queries/task";
import moment from "moment";
import { useRouter } from "next/navigation";
import { useCallback } from "react";

const TaskListRender = ({
  tasks,
  total,
}: {
  tasks: TaskEntity[];
  total: number;
}) => {
  const router = useRouter();
  const onClick = useCallback((task: TaskEntity) => {
    if (!task.status) return;
    router.push(`/user/${task.id}/task`);
  }, []);
  return (
    <ul className="divide-y divide-gray-200">
      {tasks.map((task) => {
        const finish = task._count?.UserOnTask === total;

        return (
          <li
            key={task.id}
            className="px-4 py-4 sm:px-6 cursor-pointer"
            onClick={() => task.status && onClick(task)}
          >
            <div className="flex items-center justify-between">
              <h3 className="text-lg font-medium text-gray-900 truncate">
                {task.title}
              </h3>
              <div className="ml-2 flex-shrink-0 flex">
                <span
                  className={`px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${
                    task.status
                      ? "bg-green-100 text-green-800"
                      : "bg-red-100 text-red-800"
                  }`}
                >
                  {task.status ? "进行中" : "已结束"}
                </span>
              </div>
            </div>
            <div className="mt-2 text-sm text-gray-500">{task.comment}</div>
            <div className="mt-2 sm:flex sm:justify-between">
              <div className="sm:flex">
                <p className="flex items-center text-sm text-gray-500">
                  创建时间: {moment(task.createAt).format("YYYY-MM-DD HH:mm")}
                </p>
                <p className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0 sm:ml-6">
                  更新时间: {moment(task.updateAt).format("YYYY-MM-DD HH:mm")}
                </p>
              </div>
              <div className="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
                <p>
                  进度: {task._count?.UserOnTask}/{total}
                </p>
                <p className="ml-6">{finish ? "已完成" : "未完成"}</p>
              </div>
            </div>
          </li>
        );
      })}
    </ul>
  );
};
export default TaskListRender;
